<template>
  <div  style="padding:30px 40px;">
    <a-form style="margin-top:30px;">
      <a-row :gutter="16">
        <a-col :span="5" >
          <a-form-item>
            <a-select v-decorator="['Incomeselect']" placeholder="收支类型">
              <a-select-option  value="sss1">全部</a-select-option>
              <a-select-option  value="sss2">收入</a-select-option>
              <a-select-option  value="sss3">支出</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="5" :offset='1'>
          <a-form-item>
            <a-select v-model="query.transCode" placeholder="业务类型" @change="handleChange">
              <a-select-option v-for="d in seloptions" :key="d.value">{{d.label}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" :offset='1'>
          <a-form-item v-bind="formItemLayout">
            <a-date-picker
              placeholder="交易时间"
              format="YYYYMMDD"
              @change="onChange"
              v-model="momentDate"
              :allowClear="isClear"
            />
          </a-form-item>
        </a-col>
      </a-row>
        <a-row :gutter="16" style="margin-bottom: 20px;">
            <a-col :span="5" :style="{ textAlign: 'left' }">
              <a-row type="flex" justify="space-between">
                <a-col :span="9">
                  <a-button class="button_sty" type="primary" @click="reset">重置</a-button>
                </a-col>
                <a-col :span="9">
                  <a-button class="button_sty" type="primary" :loading="loading" @click="handleSearch">查询</a-button>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
    </a-form>
    <a-row>
      <a-col style="float:right">
        <div>收入：<span style="font-size:20px;color:#29a576">{{Income | cashfilter}}</span>&ensp;元
             &ensp;&ensp; 支出：<span style="font-size:20px;color:#ff943d">{{expenditure | cashfilter}}</span>&ensp;元
        </div>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :dataSource="arr"
      :pagination="false"
      :rowKey="record => record.key"
    >
      <!-- <a slot="action" slot-scope="text" href="javascript:;void(0)">Delete</a> -->
      <!-- <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <span>交易单号：{{}}</span>
        <span>交易手续费：{{}}</span>
        <span>D0服务费：{{}}</span>
        {{record.description}}
      </div>-->
      <span slot="action" slot-scope="record">
        <span v-if="record.accountCommand=='recharge'">充值</span>
        <span v-if="record.transCode=='withdraw.api'">代付</span>
        <span v-if="record.transCode=='account.freeze'">冻结</span>
        <span v-if="record.transCode=='account.unfreeze'">解冻</span>
        <span v-if="record.accountCommand=='refund'">退款</span>
        <span v-if="record.transCode=='account.settle'">账户清算</span>
        <span v-if="record.transCode=='balance.pay'">消费</span>
        <span v-if="record.transCode=='balance.transfer'">转账</span>
        <span v-if="record.transCode=='withdraw'">提现</span>
      </span>
    </a-table>
<a-pagination  @change="onPageChange" :current="pagination.current" :total="pagination.total" :pageSize="query.pageSize" style="margin-top: 10px" />
   
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
// import GlobalFooter from "../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "时间", dataIndex: "transDate" },
  { title: "交易单号", dataIndex: "transOrderNo" },
  { title: "账户类型", dataIndex: "accountType" },
  { title: "收支", scopedSlots: { customRender: 'action' }, },
  // { title: "商户名称", dataIndex: "No1" },
  { title: "金额（元）", dataIndex: "amountone" },
  { title: "账户余额（元）", dataIndex: "amounttwo" },//debit 0是收入(网上钱到账户)1是支出(账户的钱拿走了)
  { title: "类型", dataIndex: "afterBalance" }
];

const data = [
  {
  }
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    // GlobalFooter,
    ATabPane,
    ATabs,
    AForm
  },
  data() {
    return {
      today:new Date(),
      data,
      columns,
      list:{},
      loading: false,
      isClear: false,
      expenditure:"0",
      Income:"0",
      momentDate: moment(new Date()),
      query: {
        transCode:"all",
        current:1,
        pageSize:10,
      },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      arr:[],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
          md: { span: 16 }
        }
      },
      incomeselect:"sss1",
      pagination:{current:null,total:null},
      seloptions: [
          {value: "all",label: "全部"},
          {value: "recharge",label: "充值"},
          {value: "withdraw.api",label: "代付"},
          {value: "account.freeze",label: "冻结"},
          {value: "account.unfreeze",label: "解冻"},
          {value: "refund",label: "退款"},
          {value: "account.settle",label: "账户清算"},
          {value: "balance.pay",label: "消费"},
          {value: "balance.transfer",label: "转账"},
          {value: "withdraw",label: "提现"}
        
      ]
    };
  },
  filters: {
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2);
      // return Number(value).toFixed(2)
    }
  },
  watch: {},
  computed: {},
  mounted() {
    var date = new Date();
    var month = date.getMonth();
    var dates = date.getDate();
    if (date.getMonth() < 9) {
        month = "0" + parseInt(month + 1);
      } else  {
        month = month + 1;
      }
      if (date.getDate() <= 9) {
        dates = "0" + date.getDate();
      }
    this.query.transDate = date.getFullYear() + "" + month + "" + dates;
    this.handleSearch();
  },
  methods: {
    onPageChange:function(page,pageSize){
      console.info(page,pageSize)
      this.query.current=page;
      this.query.pageSize=pageSize;
      this.handleSearch();
    },
    moment,
    onChange(dates, dateStrings) {
      this.query.transDate = dateStrings;
    },
    reset() {this.query.transCode=null;this.query.transDate=null;this.query.transCode=null;},
    conexport() {},
    callback() {},
    handleSearch() {
      this.loading = true;
      this.incomeselect = this.form.getFieldValue("Incomeselect");
      console.info(this.query)
      api.coustromAccountOrg(this.query,res=>{
        console.info(res)
        this.loading = false;
        this.arr=[];
        this.list=res.list;
        this.pagination.current=res.current;
        this.pagination.total=res.total;
        for(var i=0;i<this.list.length;i++){
          if(this.list[i].debit==false){
          this.arr.push({key:i,transDate:this.list[i].transDate,
          transOrderNo:this.list[i].transOrderNo,
          transCode:this.list[i].transCode,
          amountone:this.list[i].amount,
          amounttwo:"---",
          afterBalance:this.list[i].afterBalance});
          }else{
           this.arr.push({key:i,transDate:this.list[i].transDate,
          transOrderNo:this.list[i].transOrderNo,
          transCode:this.list[i].transCode,
          amountone:"---",
          amounttwo:this.list[i].amount,
          afterBalance:this.list[i].afterBalance});  
          }
          
        }
      })
    },
    handleChange(value) {
      console.log(value);
    },
    gologin() {
      this.visible = false;
      this.$router.push("/home");
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.ant-tabs-nav {
  float: right;
}
.content4 {
  display: flex;
  margin-bottom: 20px;
  .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }
  .conright {
    padding: 0 20px;
    span {
      margin-right: 20px;
    }
  }
}
.button_sty {
    width: 100%;
  }
</style>
